<script>
import log from '@/views/monitor/job/log.vue'
import { fn } from '@/api/system/axios'
import item from '@/layout/components/Sidebar/Item.vue'

export default ({
  name: 'index',
  data() {
    return {
      //
      // 输入框组件
      // input: '',
      // searchworld:"",
      // searchworld_two:"",
      // Name:'',
      // score:'',
      //下拉组件
      options: [{
        value: '汽修',
        label: '汽修'
      },],
      value: '',

      total:0,
      form:{
        title:'',
        stuNum:'',
        studentName:'',
        className:'',
        pageSize:10,
        pageNum:1,
      },
      tableData:[],
      dilogCtent:{},
      // 对话框组件
      dialogVisible: false,

      //
    }

  },

  methods: {
    //表格索引
    indexMethod(index) {
      return index +1;
    },
    //搜索 表单参数
    onSubmit() {
      fn({...this.form}).then(res=>{
        this.tableData=res.rows
      })
    },
    //重置
    reset(){
      this.form={
        title:'',
        stuNum:'',
        studentName:'',
        className:'',
      }
      fn().then(res=>{
        this.tableData=res.rows
      })
    },

    //查看 模态框
    show(row){
     this.dialogVisible=true
      this.dilogCtent=row
    },
    //分页
    handleSizeChange(val) {
      this.form.pageSize=val
      fn({...this.form}).then(res=>{
        this.total=res.total
        this.tableData=res.rows
      })
    },
    handleCurrentChange(val) {
      this.form.pageNum=val
      fn({...this.form}).then(res=>{
        this.total=Number(res.total)
        console.log(this.total)
        this.tableData=res.rows
      })
    }
  },

  created(){
    //列表数据请求
    fn().then(res=>{
      // console.log(res )
      this.total=Number(res.total)
      this.tableData=res.rows
    })
    },

})
</script>

<template>
<div id="box">
    <!--最外边白色背景-->
    <div class="back-white">

      <!--form表单组件-->
      <el-form ref="form" :model="form" label-width="80px" class="formtable">
        <el-form-item label="标题信息">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
          <el-input v-model="form.studentName"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.className" placeholder="请选择班级">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="form.stuNum"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>

    <!--表格组件-->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        :index="indexMethod"
        width="115">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题信息"
        width="431">
      </el-table-column>
      <el-table-column
        prop="studentName"
        label="学生姓名"
        width="214">
      </el-table-column>
      <el-table-column
        prop="className"
        label="班级"
        width="214">
      </el-table-column>
      <el-table-column
        prop="stuNum"
        label="学号"
        width="214">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="发布时间"
        width="214">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="">
        <!--对话框组件-->
        <template slot-scope="scop">
          <el-button type="text" @click="show(scop.row)">查看</el-button>
        </template>

        <el-dialog
          title="详细信息"
          append-to-body
          :visible.sync="dialogVisible"
          width="55%">

          <div class="time">{{dilogCtent.createTime}}</div>
          <div class="word"><div>{{dilogCtent.title }}</div>
            <div >{{dilogCtent.content}}</div></div>

          <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>

      </el-table-column>
    </el-table>

    <!--分页器组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
      :total=total>
    </el-pagination>

  </div>
</div>
</template>

<style scoped lang="scss">
.int{
  width: 200px;
  height: 30px;
  outline: none;
}
.back-white{
  left: 226px;
  top: 90px;
  width: 1682px;
  //height: 975px;
  //min-height: calc(100vh - 100px);
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  padding: 20px;
}
.el-input--medium{
  width: 200px;
  height: 30px;
}
span:nth-of-type(1),
span:nth-of-type(2),
span:nth-of-type(3),
span:nth-of-type(4){
  width: 56px;
  height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
span:nth-of-type(2),
span:nth-of-type(3),
span:nth-of-type(4){
  margin-left: 20px;
}
span:nth-of-type(3){
  margin-right: 10px;
}

span:nth-of-type(4){
  margin-right: 2px;
}
.reset{
  margin-left: 420px;
}
el-table{
  margin-top: 50px;
}

.el-table--border{
  margin-top: 50px;
}
.pagination{
   display: flex;
   justify-content: flex-end;
   margin-top: 50px;
}

::v-deep .el-dialog__header{
  background-color: #1892FF;
}
::v-deep .el-dialog__title{
  color: white;
}
::v-deep .el-icon-close:before{
  color: white;
}

.time{
  display: flex;
  justify-content: flex-end;
  margin-right: 43px;
}
.word{
  //width: 952px;
  //height: 214px;
  margin-top: 20px;
  margin-left: 31px;
  padding: 20px;
  background-color: #F2F3F4;
}

#box{
  width: 100%;
  background-color: rgb(242, 243, 244);
  padding: 15px;
}
::v-deep .el-table--border .el-table__cell:first-child .cell{
  text-align: center;
}

::v-deep .el-table .cell{
  text-align: center;
}
::v-deep .el-dialog:not(.is-fullscreen){
  margin-top: 25vh !important;
  border-radius: 10px;
}
.formtable{
  display: flex;
  justify-content: space-around;
}
::v-deep .el-pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

</style>
